<template>
  <div class="">

    <el-card class="box-card" style="margin-top: 15px;">
      <el-page-header @back="goBack" content="增加数据"></el-page-header>

      <el-form ref="form" label-width="80px" style="width: 400px;" label-position="left">
        <p v-for="(items, index) in form_body" :key="index">

          <el-form-item :label="items.label" v-if="items.type == 'input'" :error="items.error">
            <el-input v-model="form_body[index].value"></el-input>
          </el-form-item>

          <el-form-item :label="items.label" v-if="items.type == 'select'" :error="items.error">
            <el-select v-model="form_body[index].value" :placeholder="items.label">
              <el-option :label="one.label" :value="one.value" v-for="(one, number) in items.option" :key="number"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="items.label" v-if="items.type == 'time'" :error="items.error">
            <el-date-picker type="date" placeholder="选择日期" v-model="form_body[index].value" style="width: 100%;"></el-date-picker>
          </el-form-item>

          <el-form-item :label="items.label" v-if="items.type == 'checkbox'" :error="items.error">
            <el-switch v-model="form_body[index].value"></el-switch>
          </el-form-item>


        </p>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>


    </el-card>


  </div>
</template>

<script>
  export default{
    name:"",
    data(){
      return{
        app_name:"",
        label_name:"",
        form_body:[]
      }
    },
    methods:{
      goBack(){
        this.$router.go(-1)
      },
      onSubmit(){
        // 构建提交数据的字典
        let param = new URLSearchParams()
        let submit_data = {}
        for (var i = 0; i < this.form_body.length; i++) {
          submit_data[this.form_body[i]["name"]] = this.form_body[i]["value"]
          param.append(this.form_body[i]["name"], this.form_body[i]["value"])
        }

        // 提交数据
        let _this = this
        this.$axios.post(_this.index_url + 'xadmin/' + _this.app_name + '/' +
        _this.label_name + '/' + 'add/', param).then(function(res){
          console.log(res)

          if( res.data.code == 4000 ){
            const loading = _this.$loading({
              lock: true,
              text: '数据校验中，请稍后...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });

            _this.form_body = res.data.data.form_data
            // console.log(_this.form_body)

            setTimeout(() => {
              loading.close();
            }, 500);
          }
          if( res.data.code == 2000 ){
            const loading = _this.$loading({
              lock: true,
              text: '数据提交中，请稍后...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });

            setTimeout(() => {
              loading.close();
              _this.$router.go(-1)
            }, 500);

          }


        })
      }
    },
    mounted() {
      // console.log(this.$route)
      let app_id = this.$route.params.app_id
      this.app_name = this.$route.params.app_name
      this.label_name = this.$route.params.label_name
      let app_name = this.$route.params.app_name
      let label_name = this.$route.params.label_name

      // 去后台获取本APP信息
      let _this = this
      this.$axios.get(this.$url + 'app_info/' + app_id + '/',{
        headers: {
          'token': this.$store.state.token,
          'Content-Type':'application/json'
        },
      }).then(function (res) {
        // console.log("===",res);
        if(res.status < 300){
          let index_url = res.data.index_url
          _this.index_url = index_url
          //  获取到主页路由，象主页发起请求

          _this.$axios.get(index_url + 'xadmin/' + app_name + '/' + label_name + '/' + 'add/').then(function(res){
            // console.log(res)

            if( res.data.code == 2000 ){
              const loading = _this.$loading({
                lock: true,
                text: '数据加载中，请稍后...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });

              _this.form_body = res.data.data.form_data

              setTimeout(() => {
                loading.close();
              }, 500);
            }
          })

        }else{
          _this.$message.error("服务器发生错误，请重试...")
        }

      })
    }
  }
</script>

<style>
</style>
